<template>
  <div class="container">
    <van-sticky>
      <div v-if="fileSpace && !goodsTagId" class="search-bar"
        :style="'background: #fe773d url(' + fileSpace + '/images/w-home-top-1.jpg) no-repeat'">
        <van-search
          :value="title"
          placeholder="点击输入搜索内容"
          use-action-slot
          shape="round"
          @change="onChangeVal"
          @search="onSearch"
          :autofocus="true"
          ref="searchBox">
          <div class="search-btn font-white" size="small" slot="action" @tap="onSearch2">搜索</div>
        </van-search>
      </div>
    </van-sticky>
    <div class="pad-l-10 pad-r-10 pad-t-13 pad-b-13">
      <div class="module-box">
        <template v-if="!dataNone">
          <ul>
            <li v-for="(item, index) in listData" :key="index"
              @click="pageTo(item)" class="flex">
              <div class="pic-box">
                <div class="width-124 height-124 pos-rel">
                  <!-- 跨境图标 -->
                  <div class="cross-border-pic">
                    <!-- 跨境保税 -->
                    <img
                      v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                      :src="fileSpace + '/images/icon-cross-border.png'"
                      class="icon-cross-border"
                      alt="">
                    <!-- 海外直邮 -->
                    <img
                      v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                      :src="fileSpace + '/images/icon-cross-border-22.png'"
                      class="icon-cross-border"
                      alt="">
                  </div>
                  <img v-if="item.mainImage" class="img-main width-124 height-124"
                    :src="item.mainImage + '?imageView2/1/w/690/h/690'" mode="aspectFill"/>
                </div>
                <template v-if="item.stock === 0">
                  <div class="del-layer stock-none">
                    <label>
                      <span>已售完</span>
                      <i class="font-9">SOLD OUT</i>
                    </label>
                  </div>
                  <div class="del-layer-bg"></div>
                </template>
              </div>
              <div class="detail-box flex-item">
                <div class="desc font-15 font-w mar-b-0">
                  {{ item.title }}
                </div>
                <div class="tag-number font-12 pad-l-4 pad-r-4 pad-t-2 pad-b-2">{{ item.wholesaleNum }}{{ item.unit }}起批</div>
                <div class="flex v-align-c mar-t-30 pad-t-2">
                  <label class="price flex-item" v-if="getCustomerId && wholesaleAuthority">
                    <span class="font-15">￥</span>
                    <span class="font-23">{{ item.wholesalePrice }}</span>
                  </label>
                  <div v-else class="price flex-item">
                    <img v-if="fileSpace" :src="fileSpace + '/images/unlock.png'" alt="" class="width-62 height-16">
                  </div>
                  <p class="font-12">批发价</p>
                </div>
              </div>
            </li>
          </ul>
          <div v-if="pullLoad.finished && currentPage > 2" class="pad-t-15 pad-b-15">
            <base-line title="到底了" txtColor="#aaaaaa" lineColor="#bbbbbb"></base-line>
          </div>
        </template>
      </div>
    </div>
    <div class="nodata" v-if="dataNone">
      <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-datanone-2.png'" class="width-118 height-102" alt="">
      <div class="align-c mar-t-15 font-17">暂无数据</div>
    </div>
  </div>
</template>

<script>
  import baseLine from '@/components/BaseLine/index'
  import { pageProjectGoodsByMemberId } from '@/api/home'

  export default {
    components: { baseLine },
    data() {
      return {
        listData: [],
        dataNone: false,
        currentPage: 1,
        pullLoad: {
          loading: false,
          finished: false
        },
        title: '',
        listQuery: {
          categoryId: '',
          title: '',
          memberId: '',
          customerId: '',
          currentPage: 1,
          size: 10
        },
        pageLoad: true,
        wholesaleAuthority: '',
        goodsTagId: '',
        goodsTagName: ''
      }
    },
    onLoad(options) {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.goodsTagId = options.goodsTagId ? options.goodsTagId : ''
      this.goodsTagName = options.goodsTagName ? options.goodsTagName : ''
      this.wholesaleAuthority = this.$pt.getStorageSync('wholesaleAuthority')
    },
    onShow() {
      this.loadNum = 0
      const reporter = this.getCurrentPage().page.__displayReporter.showReferpagepath
      if (this.pageLoad || reporter !== 'pages/shop/detail/main.html') {
        this.$pt.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
      }
    },
    mounted() {
      // this.listShop()
      if (this.goodsTagId) {
        this.listQuery.goodsTagId = this.goodsTagId
        this.$pt.setNavigationBarTitle({
          title: this.goodsTagName
        })
        this.listShop()
      }
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.listShop()
      }
    },
    onPullDownRefresh() {
      this.resetData()
      this.listShop()
      setTimeout(() => {
        this.$pt.stopPullDownRefresh()
      }, 500)
    },
    methods: {
      pageTo(item) {
        this.pageLoad = false
        this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=30'})
      },
      resetData() {
        // 重置数据
        this.currentPage = 1
        this.listData = []
        this.pullLoad.finished = false
      },
      onSearch(e) {
        // 键盘直接搜索点击事件
        this.title = e.mp.detail
        this.resetData()
        this.listShop()
      },
      onChangeVal(e) {
        this.title = e.mp.detail
      },
      onSearch2() {
        // 搜索按钮点击事件
        this.resetData()
        this.listShop()
      },
      listShop() {
        this.$utils.showToast({
          title: '加载中',
          icon: 'loading'
        })
        this.listQuery.title = this.title
        this.listQuery.memberId = this.getCustomerId || this.getMemberId
        this.listQuery.customerId = this.getCustomerId
        this.listQuery.currentPage = this.currentPage
        pageProjectGoodsByMemberId(this.listQuery).then((response) => {
          if (response.isError) return
          this.$pt.hideToast()
          this.dataNone = false
          response.data.records.forEach(item => {
            this.listData.push(item)
          })
          // 翻页+1
          this.currentPage++
          if (this.listData.length === 0 || this.listData.length >= response.data.total) {
            this.pullLoad.finished = true
          }
          if (response.data.records.length === 0) {
            this.dataNone = true
          }
        }).catch(() => {
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .container{
    background: #f8f8f8;
    min-height: 100vh;
    .search-bar{
      color: #919191;
      background-size: 375px 40px!important;
      min-height: 40px;
      padding-top: 6px;
      box-sizing: border-box;
      /deep/ .van-search{
        background: none!important;
      }
      .home-search{
        background: #fff;
        border-radius: 13px;
        height: 34px;
      }
    }
    .nodata{
      margin: 80px 0 0 0;
      text-align: center;
      img{
        margin: 0 auto;
      }
    }
  }
  .module-box{  
    .title-bar{
      h2{
        margin: 0;
        padding: 0;
      }
    }
    ul{
      padding: 0;
      margin: 0; 
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      li{
        list-style-type: none;
        background: #fff;
        border-radius: 6px;
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0px;
        }
        .detail-box{
          padding: 10px 10px 0 10px;
        }
        .pic-box{
          position: relative;
          z-index: 1;
          .img-main{
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
          }
          .del-layer-bg{
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 5;
          }
          .del-layer{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 6;
            text-align: center;
            color: #fff;
            display: block;
            label{
              width: 58px;
              height: 58px;
              line-height: 1;
              margin-top: 25%;
              font-size: 15px;                  
              // background: rgba(4, 4, 4, 0.6);
              border: rgba(255, 255, 255, 0.6) 1px solid;
              border-radius: 100px;            
              display: inline-block;
              span{
                display: block;
                margin-top: 16px;
              }
              i{
                display: block;
                margin-top: 3px;
                color: rgba(255, 255, 255, 0.8);
              }
            }
            p{
              display: block;
              font-size: 10px;
              margin-top: 5%;
            }
          }
        }        
        .tag-number{
          background: #ffeee6;
          color: #FE7329;
          line-height: 1;
          display: inline-block;
        }
        .desc{
          height: 20px;
          line-height: 1.3;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-line-clamp:1;
          -webkit-box-orient:vertical;
          word-break:break-word;
        }
        .price{
          color: #FF5742;
        }
        p{
          color: #A8A8A8;
        }
      }
    }
  }
</style>
